/*初始化 scroll transform子元素实现滚动效果
--------需要传入的参数-----------
@param {
    childElement: HTMLElement,  子元素
    parentElement: HTMLElement,  父元素
    pauseNum: Number,  滚动完之后的暂停时间 暂停时间 = pauseNum * perTime
    perTime: Number,  移动 1px 需要的时间 毫秒
    isStop: Boolean,  鼠标放置是否暂停 为 true 时 添加鼠标事件 注意注销事件 removeEvent
    whellMoveDistance: Number,  滚轮单次滚动滚动移动的距离
    moveDirection: String,  移动方向 toBottom / toRight  默认值 - toBottom
}
--------return 的方法-----------
@return {
    initScroll  开始滚动 初始化重新开始
    stopScroll  暂停滚送
    resumeScroll  回复暂停的滚动
    removeEvent  移除事件的方法
}
*/
export function createScroll(option) {
    let { childElement, parentElement, pauseNum = 10, perTime = 200, isStop, whellMoveDistance = 0, moveDirection = 'toBottom' } = option // distance 距离
    let transformDirection // translateY 或者 translateX
    let childSize // 子元素
    let parentSize // 父元素
    let scrollDistance // 需要移动的距离
    let stopFlag // 鼠标移入/鼠标移出 时滚动事件状态
    // 根据 moveDirection = 'toBottom' 值 计算子元素 父元素 要移动的距离 方向
    switch (moveDirection) { // direction 方向
        case 'toBottom':
            transformDirection = 'translateY'
            childSize = childElement.offsetHeight
            parentSize = parentElement.offsetHeight
            scrollDistance = parentSize < childSize ? (childSize - parentSize + 40) : 0
            break
        case 'toRight':
            transformDirection = 'translateX'
            childSize = childElement.offsetWidth
            parentSize = parentElement.offsetWidth
            scrollDistance = parentSize < childSize ? (childSize - parentSize + 40) : 0
            break
    }
    let timerId = null // 定时器
    let translateDistance // 已经移动的距离
    let pauseCount // 滚动到底部需要停顿的时间 暂停时间 = pauseNum * perTime
    function initScroll() {
        if (timerId) clearInterval(timerId)
        childElement.style.transform = `${transformDirection}(0px)`
        childElement.style.transition = 'none'
        translateDistance = 0
        pauseCount = 0
        if (childSize <= parentSize) return
        timerId = setInterval(() => {
            if (translateDistance <= scrollDistance) {
                if (!stopFlag) translateDistance++
                childElement.style.transform = `${transformDirection}(-${translateDistance}px)`
                childElement.style.transition = `transform ${perTime}ms linear`
            } else {
                pauseCount++
                if (pauseCount <= pauseNum) return
                if (pauseCount > pauseNum && !stopFlag) {
                    translateDistance = 0
                    pauseCount = 0
                    childElement.style.transform = `${transformDirection}(0px)`
                    childElement.style.transition = 'transform 0s linear'
                }
            }
        }, perTime)
    }
    // 当传入的参数 isStop: true 鼠标放置暂停
    if (isStop) { addEvent() }
    // 清除 定时器 鼠标移入 鼠标移出 事件
    function removeEvent() {
        clearInterval(timerId)
        parentElement.removeEventListener('mouseenter', stopScroll)
        parentElement.removeEventListener('mouseleave', resumeScroll)
    }
    // 当传入的 isStop = true 添加 鼠标移入/鼠标移出 事件
    function addEvent() {
        parentElement.addEventListener('mouseenter', stopScroll)
        parentElement.addEventListener('mouseleave', resumeScroll)
        parentElement.addEventListener('wheel', parentElementWheel)
    }
    // 鼠标移入 滚动事件 停止
    function stopScroll() { stopFlag = true }
    // 鼠标移出 滚动事件 继续
    function resumeScroll() { stopFlag = false }
    // 鼠标滚动 列表往相应的方向滚动 whellMoveDistance 距离
    function parentElementWheel(e) {
        e.preventDefault()
        if (e.deltaY > 0) {
            translateDistance += whellMoveDistance
            if (translateDistance > scrollDistance) translateDistance = scrollDistance
        } else {
            translateDistance -= whellMoveDistance
            if (translateDistance < 0) translateDistance = 0
        }
    }
    return { initScroll, stopScroll, resumeScroll, removeEvent }
}